import style from  'rc-dialog/assets/index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import Dialog from 'rc-dialog';

class MyDialog extends React.Component {
    constructor(props) {
        super(props);
        this.state={
           visible: false,
          width: 600,
          destroyOnClose: false,
          center: false,
        }
    }
    
   

    onClick(e) {
        this.setState({
          mousePosition: {
            x: e.pageX,
            y: e.pageY,
          },
          visible: true,
        });
    }

      onClose(e) {
        console.log(e);
        this.setState({
          visible: false,
        }); 
      }

  onDestroyOnCloseChange(e) {
    this.setState({
      destroyOnClose: e.target.checked,
    });
  }

  changeWidth() {
    this.setState({
      width: this.state.width === 600 ? 800 : 600,
    });
  }

  center(e) {
    this.setState({
      center: e.target.checked,
    });
  }

  render() {
<<<<<<< HEAD
<<<<<<< HEAD
    
=======

>>>>>>> 7ab3436232e39cfd39819ca53d370c8aba3046c6
=======

>>>>>>> b810f83a7c376fc84da2ff8c87cfc3149caf3c23
    let dialog;
    if (this.state.visible || !this.state.destroyOnClose) {
      const style = {
        width: this.state.width,
      };
      let wrapClassName = '';
      if (this.state.center) {
        wrapClassName = 'center';
      }
      dialog = (
        <Dialog
          visible={this.state.visible}
          wrapClassName={wrapClassName}
          animation="zoom"
          maskAnimation="fade"
          onClose={this.onClose.bind(this)}
          style={style}
          mousePosition={this.state.mousePosition}
          title={<div>第二个弹框</div>}
        >
          <input />
          <p>basic modal</p>
          <button onClick={this.changeWidth.bind(this)}>change width</button>
          <div style={{ height: 200 }}></div>
        </Dialog>
      );
    }
    return (
      <div>
        <style>
          {
            `
            .center {
              display: flex;
              align-items: center;
              justify-content: center;
            }
            `
          }
        </style>
        <p>
          <button
            className="btn btn-primary"
            onClick={this.onClick.bind(this)}
          >
            show dialog
          </button>

        
        </p>
        {dialog}
      </div>
    );
  }





}

export default MyDialog;
